<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制台</title>
    <!-- head_mobile BEGIN -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name='viewport'
          content='width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, target-densitydpi=medium-dpi, <?php echo isset($viewport_append) ? $viewport_append : "" ?> '/>
    <!-- head_mobile END -->
    <!-- head_element BEGIN -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.10/vue.min.js"></script>

    <link rel="stylesheet"
          href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.0/theme-chalk/index.css">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/element-ui/2.8.2/index.js"></script>
    <!-- head_element END -->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <!---->
        <!---->
        <!---->
        <el-main class='x-main'>
            <!---->
            <!---->
            <el-form @submit.native.prevent class="x_form" :inline="true" :model="form" size="mini">
                <el-tabs type="border-card">
                    <el-tab-pane label="APP更新">
                        <el-form-item label="">
                            <el-button :disabled="btn_disabled" :loading="loading" type="warning" @click="cmd(0)">全更JAVA</el-button>
                            <el-button :disabled="btn_disabled" :loading="loading" type="primary" @click="cmd(1)">重启JAVA</el-button>
                            <el-button :disabled="btn_disabled" :loading="loading" type="primary" @click="cmd(2)">更新接口文档</el-button>
                            <el-button :disabled="btn_disabled" :loading="loading" type="primary" @click="cmd(3)">更新res-file</el-button>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane v-if="false" label="DOCKER操作">
                        <el-form-item label="应用">
                            <el-select v-model="docker" clearable filterable>
                                <el-option value="nginx" label="NGINX"></el-option>
                                <el-option value="redis" label="REDIS"></el-option>
                                <el-option value="mysql" label="MYSQL"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="funcGenToJob">RESTART</el-button>
                            <el-button type="danger" @click="funcGenToJob">STOP</el-button>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
                <div class="table-wrap">
                    <el-input id="msg" type="textarea" rows='20'
                              readonly="true"
                              placeholder="命令信息反馈"
                              v-model="outmsg">
                    </el-input>
                </div>
            </el-form>
        </el-main>
        <!---->
        <!---->
    </el-container>
    <!---->
    <!---->
    <!---->
</body>
</html>

<script>
    let api_root = "{#app_root}";
    let api_token = "{#api_token}";
    // let api_root = "http://localhost:8110/";
    var g_vue = new Vue({
        el: '#app',
        data: {
            loading: false,
            form: {},
            btn_disabled: false, //锁按钮
            docker: "",
            outmsg: "",
            outmsg_key: "", //命令反馈key
        },
        mounted() {
            console.log("mounted");
        },
        methods: {
            //命令反馈文本，滚动到最后一行
            funcScrollTop() {
                const textarea = document.getElementById('msg');
                textarea.scrollTop = textarea.scrollHeight;
            },
            //执行cmd命令
            cmd(type) {
                console.log("cmd");
                console.log('cmd', type);

                //清空文本框
                g_vue.outmsg = '';
                g_vue.func_btn_disabled(true);
                //
                axios({
                    url: `${api_root}app/console/api/cmd?type=${type}&token=${api_token}`,
                }).then((res) => {
                    console.log('success', res)
                    if (res.data.errcode == 0) {
                        //执行命令成功
                        g_vue.outmsg_key = res.data.key;
                        g_vue.cmd_msg();
                    } else {
                        g_vue.func_btn_disabled(false);
                        g_vue.$message.error(res.data.errmsg);
                    }
                }).catch((res) => {
                    console.log('error', res)
                    g_vue.$message.error(res);
                });
            },
            //命令反馈
            cmd_msg() {
                if (g_vue.outmsg_key == "") {
                    g_vue.$message.error("缺少key");
                    return;
                }
                console.log("cmd_msg");
                let f = new FormData()
                f.append('key', g_vue.outmsg_key);
                //
                axios({
                    // method: `POST`,
                    url: `${api_root}app/console/api/cmd_msg?key=${g_vue.outmsg_key}&token=${api_token}`,
                    // data: {
                    //     key: g_vue.outmsg_key,
                    // },
                }).then((res) => {
                    console.log('success', res)
                    if (res.data.errcode == 0) {
                        for (const resKey in res.data.msg) {
                            g_vue.outmsg += `${res.data.msg[resKey]} \n`;
                        }
                        g_vue.funcScrollTop();

                        if (!res.data.done) {
                            console.log("命令未执行完成，2秒后继续执行");
                            setTimeout(() => {
                                g_vue.cmd_msg();
                            }, 2000);
                        } else {
                            console.log("命令执行完成");
                            g_vue.func_btn_disabled(false);
                        }
                    }
                }).catch((res) => {
                    console.log('error', res)
                    g_vue.$message.error(res);
                });
            },
            //锁按钮
            func_btn_disabled(disabled) {
                g_vue.loading = disabled;
                g_vue.btn_disabled = disabled;
            }
            ////////////////////////
        }
    });
</script>

<style>
    .el-form .x_form {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
        background: #fff;
        border-top: 1px solid #d6d6d6;
        padding: 20px 0;
    }
</style>